<!DOCTYPE html>
<html>
<head>
	<title>超出显示点点点</title>
	<meta charset="utf-8">
</head>
<body>
	<div>white-space: nowrap;</div><div>不换行</div>
	<div>overflow: hidden;</div><div>超出隐藏</div>
	<div>text-overflow: ellipsis;</div><div>超出显示点点点</div>

	<p>
		<!-- 写法 -->
		<!-- 单行文本的溢出显示省略号 -->
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		<!-- 单行文本的溢出显示省略号 方法2 -->
		overflow : hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
	    -webkit-box-orient: vertical; /* 垂直排列 */
	    word-break: break-all;  /* 内容自动换行 */
		<!-- 多行文本溢出 -->
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	</p>
</body>
</html>